<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-scrollbar class="custom-scroll" :style="{height: formConfig.height + 'px', 'min-height': '100px'}">
      <el-form
        ref="form"
        :model="formData"
        class="full-width-input"
        :rules="rules"
        :label-width="formConfig.labelWidth + 'px'"
        :size="defaultFormItemSize"
        :label-position="formConfig.labelPosition"
        @submit.native.prevent
      >
        <el-row :gutter="formConfig.gutter">
          <template v-for="widget in formConfig.formWidgetList">
            <CustomTable
              v-if="widget.widgetType === SysCustomWidgetType.Table"
              :ref="widget.variableName"
              :key="widget.id"
              :widget-config="widget"
              :form-type="formConfig.formType"
              :primary-column-name="widget.primaryColumnName"
              :is-new="isRelationTableAdd(widget)"
              :get-table-query-params="getTableQueryParams"
              @operationClick="onTableOperationClick"
            />
            <CustomUpload
              v-else-if="widget.widgetType === SysCustomWidgetType.Upload"
              :ref="widget.variableName"
              :key="widget.id"
              v-model="formData[getWidgetFieldName(widget)]"
              :widget-config="widget"
              :flow-data="flowData"
              :get-data-id="getWidgetPrimaryColumnId"
            />
            <CustomWidget
              v-else
              :ref="widget.variableName"
              :key="widget.id"
              v-model="formData[getWidgetFieldName(widget)]"
              :widget-config="widget"
              :form-config="formConfig"
              :get-dropdown-params="getDropdownParams"
            >
              <template v-for="subWidget in widget.childWidgetList">
                <CustomTable
                  v-if="subWidget.widgetType === SysCustomWidgetType.Table"
                  :ref="subWidget.variableName"
                  :key="subWidget.id"
                  :widget-config="subWidget"
                  :form-type="formConfig.formType"
                  :is-new="isRelationTableAdd(subWidget)"
                  :get-table-query-params="getTableQueryParams"
                  @operationClick="onTableOperationClick"
                />
                <CustomUpload
                  v-else-if="subWidget.widgetType === SysCustomWidgetType.Upload"
                  :ref="subWidget.variableName"
                  :key="subWidget.id"
                  v-model="formData[getWidgetFieldName(subWidget)]"
                  :widget-config="subWidget"
                  :flow-data="flowData"
                  :get-data-id="getWidgetPrimaryColumnId"
                />
                <CustomWidget
                  v-else
                  :ref="subWidget.variableName"
                  :key="subWidget.id"
                  v-model="formData[getWidgetFieldName(subWidget)]"
                  :widget-config="subWidget"
                  :form-config="formConfig"
                  :get-dropdown-params="getDropdownParams"
                />
              </template>
            </CustomWidget>
          </template>
        </el-row>
      </el-form>
    </el-scrollbar>
    <el-row v-if="formConfig.formType === SysOnlineFormType.FORM" type="flex" justify="end" style="margin-top: 15px;">
      <el-button
        v-if="formConfig.formKind === SysOnlineFormKind.DIALOG"
        type="primary"
        :size="defaultFormItemSize"
        :plain="true"
        @click="onCancel(false)"
      >
        取消
      </el-button>
      <el-button
        type="primary"
        :size="defaultFormItemSize"
        @click="onSave()"
      >
        保存
      </el-button>
    </el-row>
  </div>
</template>

<script>
import '@/staticDict/flowStaticDict.js'
import { OnlineFormMixins } from './onlineFormMixins.js'
import CustomUpload from '@/views/onlineForm/components/customUpload.vue'
import CustomWidget from '@/views/onlineForm/components/customWidget.vue'
import CustomTable from '@/views/onlineForm/components/customTable.vue'

export default {
  name: 'OnlineEditForm',
  inject: ['preview'],
  components: {
    CustomWidget,
    CustomTable,
    CustomUpload
  },
  mixins: [OnlineFormMixins],
  props: {
    operationType: {
      type: [Number, String],
      required: true
    },
    saveOnClose: {
      type: String,
      default: '1'
    },
    rowData: {
      type: Object,
      default: () => {}
    },
    flowData: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
  },
  methods: {
    getWidgetFieldName(widget) {
      if (widget && widget.relation == null) {
        return (widget.column || {}).columnName
      } else {
        return widget.relation.variableName + '__' + (widget.column || {}).columnName
      }
    },
    // 当前表格是否为新建从表数据
    isRelationTableAdd(tableWidget) {
      const temp = Number.parseInt(this.operationType) === this.SysCustomWidgetOperationType.ADD && tableWidget.relation != null
      return temp
    },
    onCancel(isSuccess, data) {
      this.$emit('close', isSuccess, data)
    },
    onSave() {
      if (this.preview()) return

      setTimeout(() => {
        this.$refs.form.validate(valid => {
          if (!valid) return
          const datasourceId = (this.masterTable.datasource || {}).datasourceId
          const relationId = (this.masterTable.relation || {}).relationId
          const params = {
            datasourceId,
            relationId,
            masterData: relationId == null ? this.formData : undefined
          }
          // 添加调用按钮接口代码
          if (this.saveOnClose === '1') {
            if (datasourceId != null && datasourceId !== '') {
              // 从表数据
              let slaveData = {}
              if (relationId == null) {
                if (Array.isArray(this.tableWidgetList) && this.tableWidgetList.length > 0 && Number.parseInt(this.operationType) === this.SysCustomWidgetOperationType.ADD) {
                  this.tableWidgetList.forEach(tableWidget => {
                    const tableData = this.getRelationTableData(tableWidget)
                    if (tableData != null) {
                      slaveData[tableWidget.relation.relationId] = tableData
                    }
                  })
                }
              } else {
                slaveData = this.masterTable.columnList.reduce((retObj, column) => {
                  const fieldName = this.masterTable.relation.variableName + '__' + column.columnName
                  retObj[column.columnName] = this.formData[fieldName]
                  return retObj
                }, {})
                slaveData = {
                  ...slaveData,
                  ...this.params
                }
              }
              params.slaveData = slaveData
              // params.slaveData.video_course_id = '1037103328223401584';
              let httpCall = null
              if (Number.parseInt(this.operationType) === this.SysCustomWidgetOperationType.ADD) {
                if (relationId == null) {
                  httpCall = this.doUrl('/service-workflow/b/form/onlineOperation/v1/addDatasource/' + (this.masterTable.datasource || {}).variableName, 'post', params)
                } else {
                  httpCall = this.doUrl('/service-workflow/b/form/onlineOperation/v1/addOneToManyRelation/' + (this.masterTable.datasource || {}).variableName, 'post', params)
                }
              } else {
                if (relationId == null) {
                  httpCall = this.doUrl('/service-workflow/b/form/onlineOperation/v1/updateDatasource/' + (this.masterTable.datasource || {}).variableName, 'post', params)
                } else {
                  httpCall = this.doUrl('/service-workflow/b/form/onlineOperation/v1/updateOneToManyRelation/' + (this.masterTable.datasource || {}).variableName, 'post', params)
                }
              }
              httpCall.then(res => {
                this.onCancel(true, this.formData)
              }).catch(e => {})
            }
          } else {
            const masterData = {
              // 级联添加数据唯一标识
              __cascade_add_id__: this.formData.__cascade_add_id__ || new Date().getTime()
            }
            if (this.masterTable && Array.isArray(this.masterTable.columnList)) {
              this.masterTable.columnList.forEach(column => {
                let keyName = column.columnName
                if (this.masterTable.relation) keyName = this.masterTable.relation.variableName + '__' + keyName
                masterData[keyName] = this.formData[keyName]
              })

              if (Array.isArray(this.dropdownWidgetList)) {
                this.dropdownWidgetList.forEach(dropdwonWidget => {
                  let keyName = dropdwonWidget.column.columnName
                  if (dropdwonWidget.table.relation) keyName = dropdwonWidget.table.relation.variableName + '__' + keyName
                  const tempWidget = this.$refs[dropdwonWidget.variableName]
                  if (Array.isArray(tempWidget)) {
                    tempWidget.forEach(item => {
                      masterData[keyName + '__DictMap'] = {
                        id: this.formData[keyName],
                        name: item.getDictValue(this.formData[keyName])
                      }
                    })
                  }
                })
              }
            }
            this.onCancel(true, masterData)
          }
        })
      }, 30)
    },
    getTableQueryParams(widget) {
      let queryParams = []
      if (Array.isArray(widget.queryParamList)) {
        queryParams = widget.queryParamList.map(item => {
          const paramValue = this.getParamValue(item.paramValueType, item.paramValue)
          if (paramValue == null || paramValue === '' || (Array.isArray(paramValue) && paramValue.length === 0)) return
          const temp = {
            tableName: item.table.tableName,
            columnName: item.column.columnName,
            filterType: item.column.filterType,
            columnValue: item.column.filterType !== this.SysOnlineColumnFilterType.RANFGE_FILTER ? paramValue : undefined
          }
          if (item.column.filterType === this.SysOnlineColumnFilterType.RANFGE_FILTER) {
            temp.columnValueStart = paramValue[0]
            temp.columnValueEnd = paramValue[1]
          }
          return temp
        }).filter(item => item != null)
      }

      return queryParams
    },
    getDropdownParams(widget) {
      if (Array.isArray(widget.dictParamList)) {
        let params = {}
        for (let i = 0; i < widget.dictParamList.length; i++) {
          const dictParam = widget.dictParamList[i]
          if (dictParam.dictValue == null || dictParam.dictValueType == null) continue
          params = this.getParamValueObj(dictParam.dictParamName, dictParam.dictValueType, dictParam.dictValue, params)
          if (params == null) return null
        }

        return params
      } else {
        return {}
      }
    },
    onTableOperationClick(operation, row, widget) {
      this.handlerOperation(operation, row, widget)
    }
  }
}
</script>

<style>
</style>
